<template>
  <div class="plus_index">
    <header class="top">
      <header class="vip">
        <section class="con">
          <div class="header">
            <div class="avatar">
              <img
                :src="userInfo.blogProfilePhoto"
                alt=""
                v-if="!!userInfo.blogProfilePhoto"
              />
              <img src="~static/my/user.png" alt="" v-else />
            </div>
          </div>
          <div class="right">
            <div class="station">
              {{ userInfo.blogNickName }}
              <!-- <span class="icon"></span> -->
              <img
                class="cardImg"
                v-if="
                  userInfo.superInfo && userInfo.superInfo.status !=0 && userInfo.superInfo.superName == '月卡'
                "
                src="~static/plus/month.png"
                alt=""
              />
              <img
                class="cardImg"
                v-if="
                  userInfo.superInfo && userInfo.superInfo.status !=0 && userInfo.superInfo.superName == '季卡'
                "
                src="~static/plus/season.png"
                alt=""
              />
              <img
                class="cardImg"
                v-if="
                 userInfo.superInfo && userInfo.superInfo.status !=0 && userInfo.superInfo.superName == '年卡'
                "
                src="~static/plus/year.png"
                alt=""
              />
              <!-- <span class="grade">
                {{
                  !!userInfo.superInfo && !!userInfo.superInfo.superName
                    ? ""
                    : "暂未开通"
                }}
              </span> -->
            </div>

            <div class="expire">
              {{
                !!userInfo.superInfo ? userInfo.superInfo.endTime : "暂未开通 开通享优惠"
              }}
              <router-link
                :to="`/plus/?enterpriseId=${enterpriseId}`"
                tag="span"
                class="icon"
                v-if="userInfo.superInfo"
              >
                {{ (userInfo.superInfo &&  userInfo.superInfo.status == 0) ? "已到期" : "到期" }}
              </router-link>
              <!-- <span
                class="icon"
                :to="'/plus/?enterpriseId=' + enterpriseId"
                tag="span"
                @click="gotoSomePage('/plus/?enterpriseId=' + enterpriseId)"
              >
                {{ !!userInfo.superInfo ? "续费" : "开通" }}
              </span> -->
            </div>
            <div class="no">NO.{{ userInfo.memberCode }}</div>
          </div>

          <!-- <span class="tip"></span> -->
          <!-- <div class="scan" @click="scanShow = true">
          </div> -->
        </section>
      </header>
    </header>
    <section class="content">
      <section class="power">
        <div class="title">会员尊贵权益</div>
        <div class="box_1">
          <div class="rights"></div>
        </div>
      </section>
      <section class="detail">
        <div class="title">会员权益详情</div>
        <div class="box_1">
          <ul>
            <li v-for="v in SuperCopy" :key="v" class="circle"> {{ v }}</li>
          </ul>

        </div>
        <!--
          <div class="rules">
          <div class="rule">{{ detailRule1 }}</div>
          <div class="rule">
            {{ detailRule2 }}
          </div>
          <div class="rule">
            3.若叠加购买多个卡种会员，将会在已有有效期上顺延期限;
          </div>
          <div class="rule">
            4.购买超级会员月卡资格后，月卡会员在一个自然月有效期内享受以下优惠；季卡年卡同样规则;
          </div>
        </div>
        -->
      </section>
      <section class="pay">
        <router-link
          :to="`/plus/?enterpriseId=${enterpriseId}`"
          tag="div"
          class="btn"
        >
          <span class="text">
            {{ !!userInfo.superInfo ? "立刻续费" : "立刻开通" }}</span>
        </router-link>
        <!-- <div
          class="btn"
          :to="'/plus/?enterpriseId=' + enterpriseId"
          tag="div"
          @click="gotoSomePage('/plus/?enterpriseId=' + enterpriseId)"
        >
          <span class="text">立刻开通</span>
        </div> -->
        <!-- <div class="tip">
          开通即代表同意<span @click="showFullText">《超级会员服务协议》</span>
        </div> -->
      </section>
    </section>
    <footer class="bottom"></footer>

    <van-overlay :show="scanShow" @click.stop="scanShow = false">
      <div class="scan_wrapper">
        <div class="block">
          <div class="title">会员码</div>
          <qr
            :text="userInfo.memberCode"
            @downloadImg="downloadImg"
            name="二维码"
            class="qr"
          >
            <div style="text-align: center">用于识别会员身份，参与站内活动</div>
          </qr>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import wx from "weixin-js-sdk";
import Qr from "@/components/QrCode";
import Vue from "vue";
import { Overlay } from "vant";
Vue.use(Overlay);

export default {
  head() {
    return {
      title: "超级会员卡"
    };
  },
  data() {
    return {
      showGoApplet: true,
      infoData: {},
      ele: {},
      scanShow: false,
      superList: [],
      SuperCopy: []
    };
  },
  components: {
    Qr: Qr
  },
  computed: {
    ...mapState({
      // pointInfo: (state) => state.point.pointInfo,
    }),
    ...mapGetters({
      userInfo: "authen/userInfo"
    }),
    detailRule1() {
      if (this.superList.length == 0) {
        return "1.超级会员分为月卡、季卡、 年卡；";
      }
      let text = "1.超级会员分为";
      this.superList.map(ele => {
        text += ele.superName + "、";
      });
      text.replace(/、$/, "；");
      return text;
    },
    detailRule2() {
      if (this.superList.length == 0) {
        return " 2.月卡有效期为1个自然月，季卡有效期为3个自然月，年卡有效期为12个自然月；";
      }
      let text = "2.";
      this.superList.map(ele => {
        text += ele.superName + "的有效期为" + ele.cycle + "个自然天，";
      });
      text.replace(/，$/, "；");
      return text;
    }
  },
  created() {
    if (this.phone) {
      // this.getInfo();
      this.init();
    }
    this.getSuperCopy();
  },
  methods: {
    ...mapActions({
      // getPointInfo: "point/getPointInfo",
    }),
    ...mapActions({
      getSdkConfig: "authen/getSdkConfig"
    }),
    ...mapMutations({
      setUserInfo: "authen/setUserInfo"
    }),
    init() {
      // 获取会员卡列表
      this.$axios
        .$post("/appUserSuperList", {
          enterpriseId: this.enterpriseId
        })
        .then(res => {
          if (res.retCode != 0) {
            throw new Error("拉取超级会员卡列表失败");
          }
          this.superList = res.data;
        })
        .catch(err => {
          alert(err);
        });
      this.getInfo();
    },
    // 超级会员预热文案接口
    async getSuperCopy() {
      const res = await this.$axios.$get("/queryAppUserSuperCopy", {
        params: {
          enterpriseId: this.enterpriseId
        }
      });
      this.SuperCopy = res.data && res.data.split("\n");
    },
    // 超文本协议
    showFullText() {
      this.$router.push({
        path: "/" + this.enterpriseId + "/plus/text"
      });
    },
    // 点击卷包
    async goCouponGet() {
      try {
        const infoData = await this.$axios.$post("/appUserSuperDetail", {
          enterpriseId: this.enterpriseId,
          mobilePhone: this.phone
        });

        if (infoData.retCode !== 0) {
          throw new Error(infoData.message);
        }
        if (!infoData.data) {
          throw new Error("您暂未开通超级会员");
        }

        $nuxt.$store.commit("parse/setIssueId", infoData.data);
        this.$router.push({
          path: "/" + this.enterpriseId + "/coupon/get/"
        });
      } catch (error) {
        alert(error);
      }
    },
    couponAlert() {
      alert("优惠券暂未开放");
    },
    async getInfo() {
      try {
        const infoData = await this.$axios.$get("/selectMemberInfo", {
          params: {
            enterpriseId: this.enterpriseId,
            mobilePhone: this.phone
          }
        });

        if (infoData.retCode !== 0) {
          throw new Error(infoData.message);
        }
        this.setUserInfo(infoData.data);
      } catch (error) {
        alert(error);
      }
    },
    gotoSomePage(url) {
      console.log("开通的url：", url);
      window.open(url);
    }
  }
};
</script>

<style lang="scss">
.plus_index {
  position: relative;
  .box_1 {
    background-color: #feffff;
    border-radius: 0.2rem;
    padding: 0.2rem;
    box-sizing: border-box;
    ul {
      margin-left: 0.2rem;
      li {
        text-indent: -1em;
      }
    }
   ul li:before {
    content: "";
    border: 1px solid #FD6B00; /* 设置外层圆圈边框样式和颜色 */
    display: inline-block;
    width: 4px; /* 设置固定的宽度 */
    height: 4px; /* 设置固定的高度 */
    border-radius: 50%; /* 将外层圆圈设为圆形 */
    position: relative; /* 设置相对定位 */
    margin-right: 0.5em; /* 留出一定的间距 */
    vertical-align: middle; /* 垂直居中 */
    }
    .circle {
      color: #333333;
      margin-right: 0.1rem;
      margin-top: 0.1rem;
    }
  }
  .top {
    overflow: hidden;
    background: url("~static/plus/cover.png") no-repeat 0px 0px;
    background-size: 100% 100%;
    height: 20vh;
    .vip {
      background: url("~static/plus/card.png") no-repeat 0px 0px;
      background-size: 100% 100%;
      width: 6.88rem;
      margin: 0 auto;
      margin-top: 0.4rem;
      height: 16vh;
      padding: 0.3rem 0 0  0.3rem;
      box-sizing: border-box;
      border-radius: 0.1rem 0.1rem 0 0;
      position: relative;
      > .con {
        height: 1.8rem;
        position: relative;
        .header {
          width: 1.04rem;
          height: 1.04rem;
          // margin-left: 0.3rem;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          .avatar {
            background: rgb(153, 145, 145);
            overflow: hidden;
            width: 1.04rem;
            height: 1.04rem;
            border-radius: 50%;
            > img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .right {
          width: 3.5rem;
          height: 1.04rem;
          position: absolute;
          left: 1.2rem;
          top: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .station {
            // font-weight:bold;
            font-size: 30px;
            font-weight: normal;
            font-size: 0.3rem;
            line-height: 0.3rem;
            display: flex;
            align-items: center;
            color: #0e037b;
            .cardImg {
              margin-left: 0.2rem;
              width: 0.75rem;
              height: 0.3rem;
            }
            .icon {
              background: url("../../../static/vip/vipicon.png") no-repeat 0 0;
              background-size: 100% 100%;
              display: inline-block;
              width: 0.25rem;
              height: 0.25rem;
              line-height: 0.25rem;
            }
            .grade {
              // height: 0.29rem;
              font-size: 0.3rem;
              line-height: 0.3rem;
              color: #fadc93;
            }
          }

          .expire {
            opacity: 0.8;
            color: #ffffff;
            line-height: 0.3rem;
            font-size: 0.25rem;

            .icon {
              opacity: 0.8;
              color: #ffffff;
              // background-color: #fadc93;
              border-radius: 0.05rem;
            }
          }
          .no {
            width: 6.78rem;
            top: 1.2rem;
            height: 0.24rem;
            font-size: 0.25rem;
            line-height: 0.25rem;
            color: #ffffff;
            opacity: 0.8;
          }
        }
        .scan {
          width: 1.04rem;
          height: 1.04rem;
          position: absolute;
          right: 0.5rem;
          top: 0rem;
          background: url("~static/plus/code.png") no-repeat 0 0;
          background-size: 100% 100%;
          .tip {
            background: url("../../../static/vip/tip.png") no-repeat 0 0;
            background-size: 100% 100%;
            display: inline-block;
            width: 1.1rem;
            height: 0.4rem;
            right: -0.32rem;
            position: absolute;
            bottom: -0.45rem;
          }
        }
      }
      .cont {
        width: 100%;
        height: 1.2rem;
        background: #ffffff;
        color: #92964f;
        display: flex;
        justify-content: space-around;
        text-align: center;
        margin: 0 auto;

        .item {
          display: flex;
          justify-content: space-around;
          text-align: center;
          flex-direction: column;
          color: #90954e;
          color: #000;

          .amount {
            height: 0.6rem;
            font-size: 0.3rem;
            font-weight: bolder;
            line-height: 0.6rem;
          }
          .text {
            height: 0.4rem;
            font-size: 0.21rem;
            line-height: 0.3rem;
          }
        }
        .line {
          width: 1px;
          background: #b3b3b3;
          height: 0.4rem;
          margin-top: 0.4rem;
        }
      }
    }
  }
  .content {
    width: 100%;
    border-radius: 0.3rem 0.3rem 0 0;
    background-color: #f6f7f9;
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    margin-top: -2vh;
    height: calc(100vh - 18vh);
    // padding-bottom: 0.2rem;
    box-sizing: border-box;
    .power {
      box-sizing: border-box;
      padding: 0.3rem 0.2rem 0rem 0.2rem;
      height: 2.7rem;
      border-radius: 0.3rem 0.3rem 0 0;
      .box_1 {
        padding: 0;
      }
      // margin-top: 0.2rem;
      .title {
        font-size: 0.31rem;
        font-weight: bold;
        margin-bottom: 0.25rem;
        border-left: 3px solid #fd6b00;
        padding-left: 0.1rem;
      }
      .rights {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 0.3rem;
        height: 2rem;
        background: url("~static/plus/Rights.png") no-repeat 0 0;
        background-size: 100% 100%;
        .right {
          height: 2rem;
          width: 2rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .icon {
            width: 0.7rem;
            height: 0.7rem;
            display: inline-block;
            background: url("~static/common/a01_jifen@2x.png") no-repeat 0px 0px;
            background-size: 100% 100%;
          }
          .text {
            margin-top: 0.2rem;
            font-size: 0.27rem;
            color: #5e605e;
            text-align: center;
          }
        }
        .strategy {
          .icon {
            background: url("~static/plus/plus_discount.png") no-repeat 0px 0px;
            background-size: 100% 100%;
          }
        }
        .conpon {
          .icon {
            background: url("~static/plus/plus_coupon.png") no-repeat 0px 0px;
            background-size: 100% 100%;
          }
        }
        .point {
          .icon {
            background: url("~static/plus/plus_point.png") no-repeat 0px 0px;
            background-size: 100% 100%;
          }
        }
      }
    }
    .detail {
      box-sizing: border-box;
      padding: 0.3rem 0.2rem 1.5rem 0.2rem;
      margin-top: 0.2rem;
      .box_1 {
        min-height: 20vh;
      }
      .title {
        font-size: 0.31rem;
        font-weight: bold;
        margin-bottom: 0.25rem;
        border-left: 3px solid #fd6b00;
        padding-left: 0.1rem;
      }
      .rules {
        color: #656667;
        .rule {
          font-size: 0.27rem;
        }
      }
    }
    .pay {
      width: 100%;
      text-align: center;
      position: fixed;
      bottom: 0.1rem;
      margin-top: 0.2rem ;
      padding-bottom: 0.1rem;
      .btn {
        width: 6.24rem;
        height: 0.85rem;
        background: linear-gradient(90deg, #F0D4B4 100%, #E4B089 0%);
        border-radius: 0.5rem;
        margin-top: 0.5rem;
        text-align: center;
        line-height: 0.85rem;
        color: black;
        margin: 0 auto;
        margin-top: 0.3rem;
        .amount {
          font-size: 0.4rem;
          .yuan {
            font-size: 0.23rem;
          }
        }

        .text {
          font-size: 0.35rem;
          margin-left: 0.2rem;
        }
      }
      .tip {
        margin: 0.2rem 0;
        text-align: center;
        > span {
          color: #dcb884;
        }
      }
    }
  }
  .scan_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .block {
      width: 6rem;
      padding: 0.5rem 1rem 0.7rem 1rem;
      box-sizing: border-box;
      border-radius: 0.3rem;
      background-color: #fff;
      .title {
        font-size: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        margin-bottom: 0.3rem;
        font-weight: bold;
      }
      .qr {
        width: 100%;
      }
    }
  }
  .text_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .text_block {
    overflow: auto;
    height: 100%;
    width: 100%;
    background-color: #fff;
  }
}
</style>
